<template>
  <div class="myCenter_container">
    <div class="sideright">
      <div class="top-div">
        <div class="head-portrait-div">
          <div class="border-div">
            <img :src="uImg" alt="无法加载图片" />
          </div>
        </div>
        <div class="grxx-div">
          <h4>{{ uUsername }}</h4>
          <span><router-link to="/grzx/info">修改个人信息></router-link></span>
        </div>
        <div class="mailbox-div">
          <span>绑定邮箱:12****4@**.com</span>
        </div>
      </div>
      <div class="botton-div">
        <div class="parcel-div">
          <div>
            <img src="@/assets/images/gxin1.jpg" alt="无法加载图片" />
            <div class="imgdetail-div">
              <span>待支付的订单:<strong>0</strong></span>
              <br />
              <span><a href="#">查看待支付订单></a></span>
            </div>
          </div>
          <div>
            <img src="@/assets/images/gxin2.jpg" alt="无法加载图片" />
            <div class="imgdetail-div">
              <span>待收货的订单:<strong>0</strong></span>
              <br />
              <span><a href="#">查看待收货订单</a></span>
            </div>
          </div>
          <div>
            <img src="@/assets/images/gxin3.jpg" alt="无法加载图片" />
            <div class="imgdetail-div">
              <span>待评价的订单:<strong>0</strong></span>
              <br />
              <span><a href="#">查看待评价订单</a></span>
            </div>
          </div>
          <div>
            <img src="@/assets/images/gxin4.jpg" alt="无法加载图片" />
            <div class="imgdetail-div">
              <span>喜欢的商品:<strong>0</strong></span>
              <br />
              <span><a href="#">查看喜欢的商品</a></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'myCenter',
  data() {
    return {
      uUsername: '',
      uImg: ''
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      this.$http
        .get('/user/me')
        .then(res => {
          if (res.state === false) {
            return
          }
          this.uUsername = res.data.uUsername
          this.uImg = res.data.uImg
        })
        .catch(err => this.$message.error(err))
    }
  }
}
</script>

<style lang="less" scoped>
.sideright {
  width: 73%;
  padding: 5%;
  float: right;
  background-color: #fff;
  border: 1px solid #dbdbdb;
  .border-div {
    img {
      width: 92px;
      height: 92px;
    }
  }
  .top-div {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
  }
  .grxx-div {
    padding-left: 10px;
    h4 {
      font-size: 16px;
      margin-bottom: 5px;
    }
    a {
      // color: #a10000;
      color: #009688;
      font-size: 13px;
    }
  }
  .mailbox-div {
    flex-grow: 1;
    text-align: right;
  }
  .parcel-div {
    display: flex;
    flex: 1 1 50%;
    flex-wrap: wrap;
    padding: 5% 0 0 0;
    > div {
      width: 50%;
      display: flex;
      align-items: center;
      padding: 2% 0 2% 0;
    }
    span {
      font-size: 16px;
    }
    a {
      font-size: 12px;
    }
    strong {
      font-size: 16px;
      color: #a10000;
    }
  }
  .botton-div .imgdetail-div {
    padding: 0 0 0 10px;
  }
}
</style>
